1import {useState, useReducer, PropsWithChildren} from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import {useTranslation} from 'react-i18next';
 4import EventLayout, { TabComponent } from '../../../layouts/Event';
 5import TravelColumns from '../../../containers/TravelColumns';
 6import NewTravelDialog from '../../../containers/NewTravelDialog';
 7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
 8import {
 9  EventByUuidDocument,
10  useFindUserVehiclesQuery,
11} from '../../../generated/graphql';
12import useProfile from '../../../hooks/useProfile';
13import Fab from '../../../containers/Fab';
14import useBannerStore from '../../../stores/useBannerStore';
15import {initializeApollo} from '../../../lib/apolloClient';
16
17interface Props {
18  eventUUID: string;
19}
20
21const Page = (props: PropsWithChildren<Props>) => {
22  return <EventLayout {...props} Tab={TravelsTab} />;
23};
24
25const TravelsTab: TabComponent = (props: {event}) => {
26  const bannerOffset = useBannerStore(s => s.offset);
27  const classes = useStyles({bannerOffset});
28  const {t} = useTranslation();
29  const {user} = useProfile();
30  const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}, loading} =
31    useFindUserVehiclesQuery();
32  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
33  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
34
35  const addTravelClickHandler =
36    user && vehicles?.length != 0
37      ? toggleVehicleChoice
38      : () => toggleNewTravel({opened: true});
39
40  return (
41    <>
42      <TravelColumns toggle={addTravelClickHandler} />
43      <Fab
44        onClick={addTravelClickHandler}
45        aria-label="add-car"
46        color="primary"
47        className={classes.bottomRight}
48      >
49        {t('travel.creation.title')}
50      </Fab>
51      <NewTravelDialog
52        context={openNewTravelContext}
53        toggle={() => toggleNewTravel({opened: false})}
54      />
55      <VehicleChoiceDialog
56        open={openVehicleChoice}
57        toggle={toggleVehicleChoice}
58        toggleNewTravel={toggleNewTravel}
59        vehicles={vehicles}
60      />
61    </>
62  );
63};
64
65const useStyles = makeStyles(theme => ({
66  bottomRight: {
67    bottom: 0,
68    right: theme.spacing(6),
69
70    [theme.breakpoints.down('sm')]: {
71      right: theme.spacing(1),
72      bottom: 56,
73    },
74  },
75}));
76
77export async function getServerSideProps(ctx) {
78  const {uuid} = ctx.query;
79  const apolloClient = initializeApollo();
80  const {data = {}} = await apolloClient.query({
81    query: EventByUuidDocument,
82    variables: {uuid},
83  });
84  const {eventByUUID: event} = data;
85  const {host = ''} = ctx.req.headers;
86
87  return {
88    props: {
89      event,
90      eventUUID: uuid,
91      metas: {
92        title: event?.name || '',
93        url: `https://${host}${ctx.resolvedUrl}`,
94      },
95    },
96  };
97}
98
99export default Page;